<template>
  <div
    id="app"
    class="nice"
    :style="{ paddingBottom: $route.meta.isTabbar ? '60px' : '0px' }"
  >
    <transition :name="transitionName">
      <div>
        <van-nav-bar
          z-index="99"
          :title="$route.name || '纳思校园大使'"
          :fixed="true"
          :placeholder="true"
          :left-arrow="$route.meta.back < 0"
          @click-left="$router.go($route.meta.back)"
          v-if="$route.meta.isHeader"
        />
        <router-view class="router"></router-view>
      </div>
      <!-- <keep-alive v-if="$route.meta.keepAlive">
        <router-view class="router"></router-view>
      </keep-alive>
      <router-view class="router" v-else></router-view>-->
    </transition>
    <van-tabbar
      route
      v-model="active"
      active-color="#25B3D6"
      inactive-color="#969799"
      v-show="$route.meta.isTabbar"
    >
      <van-tabbar-item
        v-for="item in menu"
        :key="item.url"
        replace
        :to="item.url"
      >
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.active : item.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import defaultSetting from "./settings";
import { getIsWxClient } from "@/utils/index.js";
export default {
  name: "app",
  components: {},
  data() {
    //这里存放数据
    return {
      active: 0,
      menu: [
        {
          url: "/task-management",
          title: "任务管理",
          inactive: require("@/assets/img/nav_icon1.png"),
          active: require("@/assets/img/nav_icon1_act.png"),
        },
        {
          url: "/resume-recommendation",
          title: "简历推荐",
          inactive: require("@/assets/img/nav_icon2.png"),
          active: require("@/assets/img/nav_icon2_act.png"),
        },
        {
          url: "/points-ranking",
          title: "积分排行",
          inactive: require("@/assets/img/nav_icon3.png"),
          active: require("@/assets/img/nav_icon3_act.png"),
        },
        {
          url: "/personal-center",
          title: "个人中心  ",
          inactive: require("@/assets/img/nav_icon4.png"),
          active: require("@/assets/img/nav_icon4_act.png"),
        },
      ],
    };
  },
  computed: {
    transitionName() {
      if (defaultSetting.needPageTrans) {
        return this.$store.state.direction;
      }
      return "";
    },
  },
  methods: {
    
  },
  created() {
    if (getIsWxClient()) {
      let isWx = getIsWxClient() || "1";
      console.log("当前属于APP内置环境");
      localStorage.setItem("isWx", isWx);
    }
  },
  mounted() {
    document.title = this.$route.name || "纳思校招";
  },
};
</script>

<style lang="scss">
.nice {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  height: 100%;
  position: relative;
  .van-nav-bar__text {
    color: #333;
  }
  .van-icon,
  .van-icon-arrow-left,
  .van-nav-bar__arrow {
    color: #333;
  }
  .van-nav-bar__title {
    font-size: 18px;
  }
  .van-nav-bar .van-icon {
    color: #333;
  }
}

.router {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  // background-color: #fff;
}
</style>
